<template>
  <div class="center-top">
    <LabelCount :info="lists[0]" />
    <LabelCount :info="lists[1]" />
    <LabelCount :info="lists[2]" />
    <Teleport to="body">
      <CommonDialog  title="项目清单">
        <ScrollTable :columns="columns" :tableData="prjLists" />
      </CommonDialog>
    </Teleport>
  </div>
</template>

<script setup>
import ScrollTable from "@/components/scroll-table";
import icon_01 from "@/assets/icon-image/icon_top_01@2x.png";
import icon_02 from "@/assets/icon-image/icon_top_02@2x.png";
import icon_03 from "@/assets/icon-image/icon_top_03@2x.png";
import icon_04 from "@/assets/icon-image/icon_top_04@2x.png";
import { onMounted, reactive, ref, watch } from "vue";
import { useStore } from "@/store";
import { defineProps } from "vue";
const props = defineProps({
  data: Object
});


const lists = reactive([
  {
    icon: icon_01,
    value: 0,
    unit: "个",
    label: "车位总数",
    prop: "project_number",
  },
  {
    icon: icon_02,
    value: "",
    unit: '',
    label: "停车总数/余位总数",
    prop: "given_amount",
    isString:true
  },
  {
    icon: icon_04,
    value: 0,
    unit: "%",
    label: "利用率",
    prop: "complete_ratio",
  },
]);

const columns = [
  { label: "停车场名称", prop: "name", className: "prj-name" },
  { label: "停车总数/余位总数", prop: "typeLabel" },
  { label: "利用率", prop: "stageLabel" },
];

watch(() => props.data, (newData) => {
      if (newData) {
        lists[0].value = newData?.parking_count
        lists[1].value =`${newData?.parking_num_count}`+" / "+`${newData?.remaining_num_count}`
        lists[2].value = newData?.parking_num_count/newData?.parking_count*100
        
      }
    });
</script>

<style lang="scss" scoped>
.center-top {
  display: flex;
  justify-content: space-between;
}
.arrow-box {
  display: flex;
  align-items: center;
  cursor: pointer;
  img {
    width: 16px;
    height: 16px;
    display: inline-block;
    margin-left: 2px;
  }
}
</style>
